<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
</head>
<body>
<script>
	$(document).ready(function() {
		//隐藏
		$('#pmDetailTextType').hide();
		$('#filedNameTypeDiv').hide();
		$('#detailCfgSaveFom').bootstrapValidator();
	
		//动态加载pmProjectType 动态加载 项目类型
		Otod.ajax({
			url: ctx + '/common/code/getBizCodeList.do',
			data : {codeDictNo:'pmProjectType'},
			type:"GET",
			successFn : function(data) {
				//动态生成数据列表
				var sb = new StringBuffer();
				var firstCfgNo = "";
				$.each(data, function(i, n){
					if(i==0){
						firstCfgNo = n.codeNo;
						sb.append('<li class="active">');
					}else{
						sb.append('<li>');
					}
					sb.append('<a data_toggle="tab"  key="').append(n.codeNo).append('"').append('onclick="changeProjectType(\'').append(n.codeNo).append('\')">');
					sb.append('<i class="icon-rocket"></i>');
					sb.append(n.codeName);
					sb.append('</a>');
					sb.append('</li>');
				});
				$("#cfgTypeTab").html(sb.toString());
				
				if(firstCfgNo != ""){
					changeProjectType(firstCfgNo);
				}
			}
			
		});
		
		//当上来的第一个就满足条件就显示隐藏框 类型下拉框
		if($("#pmDetailFieldType").val()=="30020001"){
			//显示出来
			$('#pmDetailTextType').show();
			//如果 第一就满足条件就弹出对话框
			if($("#pmDetailTextType").val()=="30030002"){
				//显示出来
				$('#filedNameTypeDiv').show();
			}
		}
		//当选择下拉列表框改变的时候
		$("#pmDetailFieldType").change(function(){
			//选择的文本
			if($("#pmDetailFieldType").val()=="30020001"){
				//显示出来
				$('#pmDetailTextType').show();
				 //如果 第一就满足条件就弹出对话框
				if($("#pmDetailTextType").val()!="30030001"){
					//显示出来
					$('#filedNameTypeDiv').show();	
				} 
			}else{
				$('#pmDetailTextType').hide();
				$('#filedNameTypeDiv').hide();
			}
		});
		
		$("#pmDetailTextType").change(function(){
			//选择下拉单选
			 if($("#pmDetailTextType").val()!="30030001"){
				//显示出来
				$('#filedNameTypeDiv').show();
				
			}else{
				$('#filedNameTypeDiv').hide();
			}
		});
	});
	
	
	
	//取消
	function abort() {
		$("#addDiv").collapse('hide');
		$("#addBtn").show();
		//$('#').data('bootstrapValidator').resetForm();
	}
	
	//把新增button数据追加到table表中 并且默认选中
	function saveFiter(){
		//得到要添加的名字
		var name=document.getElementById("filedNameone").value;	
		if(name==""){
			$("#filedNameOneError").text("请输入列明");
			return;
		}else{
			$("#filedNameOneError").text("");
		}
		//得到要添加的类型  这里得到的是value的值
		var typeFile=$("#pmDetailFieldType").val();
		
		//新增 清空列名
		$("#filedNameone").val("");
		//判断是选的什么类型
		//如果选的是出文本以外的值 就不用判断 了【30020003】整数 【30020002】日期【30020001】文本【30020004】小数 
		 if(typeFile=="30020001"){
			//判断是不是选的 普通  pmDetailTextType   	【30030002】下拉单选 【30030001】普通【30030003】列表单选 
			var textType = $("#pmDetailTextType").val();
			//得到类别
			var DownType = $("#pmDetailDownType").val();
			//选的普通文本 存值的格式{"type":"普通文本","type":"下拉","type":"列表单选"}
			typeFile="type:"+textType+",rela:"+DownType;
		}  
		var val ="" +";"+typeFile+";"+name;
		addButton("",name,val);
	}
	//新增 按钮触发的事件
	function addRole(obj){
		$("#addDiv").collapse('show');
		$("#addBtn").hide();
	}
	//选类型触发的事件addCfg
	function addCfg(obj){
		$("#divcfgOne").collapse('show');
	}
	
	//保存
	function save() {
		/* if (!$('#detailCfgSaveFom').data('bootstrapValidator').validate().isValid()) {
			return;
		} */
		Otod.ajax({
			url : "${ctx}/pm/detail/saveCfg.do",
			data : {prjType:$('#hiddenType').val(),filedString:selectButton()},
			contentType : "application/x-www-form-urlencoded;",
			successFn : function() {
				Otod.Msg.info("保存成功");
			}
		});
	}
	//点击类型时候赋值
	function changeProjectType(prj_type){
		
		//实现点击的时候改变效果
		
		$("li").click(function(){
			$("li").removeClass("active");
			   $(this).addClass("active");
		});
			
			//删除多余的
			//删除动态添加的字段 dynamic
			$("#tdone .dynamic").remove();
   			
			$("#tdone .active").removeClass("active");
			$('#hiddenType').val(prj_type);
			$.get("${ctx}/pm/detail/selectPrjtype.do?prj_type="+prj_type,function(data){
				for ( var i in data) {
					//选中
					//"<input type='checkbox' value='"+data[i].fieldName+","+data[i].fieldType+","+data[i].fieldcommonts+"' name='fieldName' checked='checked'>"+data[i].fieldcommonts+"</input>&nbsp;");
					var obj = $("#tdone #"+data[i].fieldName);
					if(obj.length>0){
						obj.addClass("active");
					}else{
						//原先是var id = data[i].uuid 修改为 var fieldType = data[i].fieldType
						//得到字段类型
						var fieldType = data[i].fieldType;
						//字段名
						var fieldName = data[i].fieldName;
						//得到字段的汉字注释
						var fieldcommonts =data[i].fieldcommonts;
						//设置value的值
						var val = data[i].fieldName+";"+data[i].fieldType+";"+data[i].fieldcommonts;
						addButton(fieldName,fieldcommonts,val);
					}
				}
			});
	}
	//得到所有选中的button的值
	function selectButton(){
		var strs = $("#tdone").children(".active");
		var sb = new StringBuffer();
		strs.each(function(i,t) {
			sb.append(";").append($(t).val());
		});
		return sb.toString().substring(1);
	}
	//添加button
	function addButton(fieldName,fieldcommonts,val){
		var sb = new StringBuffer();
      	sb.append(' ');$("#pmDetailTextType").find("option:selected").text();
		sb.append('<button id="').append(fieldName).append('" name="').append("fieldName").append('" value="').append(val).append('" type="button" class="btn btn-xs btn-checkBox active dynamic" data-toggle="button"> <i class="icon-ok"></i>');
		sb.append(fieldcommonts).append('(类型:').append($("#pmDetailFieldType").find("option:selected").text()).append(')');       
		sb.append("</button>");
        $("#tdone").children().last().after(sb.toString());
	} 
</script>
    <div class="page-header">
        <h1>项目模板</h1>
    </div>
	<div class="row">
		<div class="col-sm-12" >
			<div class="row">
				
				<form class="form-horizontal" role="form" name="detailCfgSaveFom" id="detailCfgSaveFom" action="" method="get"
						data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
				   		data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
				    	data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"
					
				>
				<input type="hidden" value="1" id="hiddenType">
               	<div class="row">
					<div class="col-sm-12">
						<div class="tabbable tabs-left">
							<ul class="nav nav-tabs" id="cfgTypeTab">
								<!-- <li class="active">
									<a data-toggle="tab" key="1" onclick="changeProjectType('1')">
										<i class="pink icon-dashboard bigger-110"></i>
										景观设计
									</a>
								</li>	
								<li>
									<a data-toggle="tab" key="2" onclick="changeProjectType('2')">
										<i class="blue icon-user bigger-110"></i>
										旅游规划
									</a>
								</li>
								<li>
									<a data-toggle="tab" key="3" onclick="changeProjectType('3')">
										<i class="icon-rocket"></i>
										土地规划
									</a>
								</li>
								<li>
									<a data-toggle="tab" key="4" onclick="changeProjectType('4')">
										<i class="icon-rocket"></i>
										建筑设计
									</a>
								</li> -->
							</ul>
							<div class="tab-content">
								<div id="home3" class="tab-pane in active">
									 <h5 >
										<small>选择需要的列</small>
									</h5>
										<div id="tdone" class="col-sm-10">
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="prjPlace;VARCHAR;项目地点" id="prjPlace" name="fieldName">
												<i class="icon-ok"></i>
												项目地点
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="contacts;VARCHAR;联系人" id="contacts" name="fieldName">
												<i class="icon-ok"></i>
												联系人
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="addr;VARCHAR;地址" id="addr" name="fieldName">
												<i class="icon-ok"></i>
												地址
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="postcode;VARCHAR;邮编" id="postcode" name="fieldName">
												<i class="icon-ok"></i>
												邮编
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="telephone;VARCHAR;电话" id="telephone" name="fieldName">
												<i class="icon-ok"></i>
												电话
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="fax;VARCHAR;传真" id="fax" name="fieldName">
												<i class="icon-ok"></i>
												传真
											</button>
											<button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="undertakeType;VARCHAR;承接性质" id="undertakeType" name="fieldName">
												<i class="icon-ok"></i>
												承接性质
											</button>
											<!-- <button type="button" class="btn btn-xs btn-checkBox" data-toggle="button" value="undertakeUnit;VARCHAR;设计部门" id="undertakeUnit" name="fieldName">
												<i class="icon-ok"></i>
												设计部门
											</button> -->
										</div>
										<div class="col-sm-2 f-mb15">
												<button class="btn btn-xs btn-success" type="button" onclick="save()">
													<i class="icon-save"></i>保存
												</button>
					                    </div>
								</div>
										<div class="col-sm-12">
											<div class="row">
												<div class="col-sm-3 f-mb15">
														<button id="addBtn" class="btn btn-xs btn-purple" type="button"
															onclick="addRole(this);">
															<i class="icon-plus-sign"></i>新增
														</button>
												</div>
											</div>
											<div id="addDiv" class="row clearfix collapse">
												<div class="col-sm-12">
													<div class="row">
														<div class="col-sm-3 ">
															<div class="form-group">
																<label for="filedNameone" class="col-sm-3 control-label">列名</label>
																<div class="col-sm-7">
																	<input type="text" class="input-sm" id="filedNameone" name="filedNameone" placeholder="请输入列名" data-bv-notempty data-bv-notempty-message="列名必填">	
																	<br/>
																	<span id="filedNameOneError" style="color: red"></span>
																</div>
															</div>
														</div>
														
														<div class="col-sm-3 ">
															<label for="filedTypeOne" class="col-sm-4 control-label">类型</label> 
															<div class="col-sm-7">
															<!-- name名字自己取  类型下拉框-->
																<tags:select type="pmDetailFieldType" onchange="" name="one" id="pmDetailFieldType" >
																	
																</tags:select>
																
															</div>	
														</div>
														<div class="col-sm-3">
															<div class="col-sm-7">
																<!-- 选文本出现的下拉框 -->
																<tags:select type="pmDetailTextType" name="pmDetailTextType" id="pmDetailTextType">	
																</tags:select>
															</div>	
														</div>
														<!--  选下拉单选 或者类别单选  出现的页面-->
														<div class="col-sm-3" id="filedNameTypeDiv">
															<label for="filedNameType" class="col-sm-5 control-label">选择类别</label> 
															<div class="col-sm-7">
																<tags:select type="" name="pmDetailDownType" id="pmDetailDownType" dataUrl="/sys/code/queryCodeDict.do" optionName="codeDictName" optionValue="codeDictNo">	
																	
																</tags:select>
															</div>	
														</div>
														<br/>
														<br/>
														<br/>
														<br/>
														<br/>
														<div class="col-sm-4" style="margin-left: 300px">
															<button class="btn btn-xs btn-success" type="button"
																onclick="saveFiter()">
																<i class="icon-save"></i>新增
															</button>
															<button class="btn btn-xs btn-default" type="reset"
																onclick="abort();">
																<i class="icon-remove"></i>取消
															</button>
														</div>
														
													</div>
												</div>
											</div>
										</div>			
							</div>
						</div>
					</div>
					</div>		
					<!-- /span -->		
					<div class="col-sm-4"></div>	
					<br>
				</form>
			</div>
		</div>
		
	</div>
</body>